const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { DefinePlugin } = require("webpack");

//公共的打包配置
module.exports = {
    // mode:'development',
  //入口文件
  entry: "./src/main.js",
  //打包出口文件 这个里面我们需要用到__dirname来生成一个绝对路径
  output: {
    path: path.resolve(__dirname, "dist"),
    filename:"bundle.js"
  },
  module: {
    rules: [
        // {
        //     test: /\.(vue|js)$/,
        //     loader: "eslint-loader",
        //     exclude: /node_modules/,
        //     // 预处理
        //     enforce: "pre"
        // },
        {
            test: /\.vue$/,
            //用于解析vue文件
            use: ["vue-loader"]
        },
        {
            test: /\.js$/,
            //刨除node_modules中的js代码
            exclude: /node_modules/,
            //对于js代码，我们需要使用babel-loader来进行代码的转换编译
            use: ["babel-loader"]
        },
        // {
        //     test: /\.less$/,
        //     //对于less代码，我们需要使用less-loader来转换，然后再用css-loader 和 vue-style-loader
        //     use: ["style-loader","css-loader", "less-loader"]
        // },
        // {
        //     test: /\.css$/,
        //     //这个是用来转换vue中的style标签和css文件的
        //     use: ["style-loader","css-loader"]
        // },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            //对于文件的复制
            loader: "url-loader",
            //限制最大为10k 超过10K还是按文件存储，不会转换为base64
            options: {
                limit: 10 * 1024,
                //一定要加这个 不然src中会是一个object module
                esModule: false
            }
        }
    ]
  },
  plugins:[
        new VueLoaderPlugin(),
        //添加我们的HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        //后续会把这个抽离到webpack.dev.js中
        // new DefinePlugin({
        //     //定义BASE_URL index.html中需要使用
        //     BASE_URL: "/public/"
        // })
  ]
};